import Taro, { Component } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { getCustomerList } from "../../actions/customer";
import { connect } from "@tarojs/redux";
import Item from "../../components/customer/item";
import "./list.less";

@connect(
  ({ customer }) => ({
    ...customer
  }),
  dispatch => ({
    async getCustomerList(params) {
      dispatch(await getCustomerList(params));
    }
  })
)
class CustomerList extends Component {
  state = {
    types: [
      { title: "已提交", active: false,state:0 },
      { title: "已预约", active: false,state:1 },
      { title: "已到司", active: false,state:3 },
      { title: "已成交", active: false,state:4 },
      { title: "已流失", active: false,state:5 }
    ],
    ctime: [
      {
        title: "今日预约到店客户",
        key: "today",
        active: false
      },
      {
        title: "明日预约到店客户",
        key: "tomorrow",
        active: false
      }
    ],
    template: {
      "已提交": "提交时间",
      "已预约": "预约时间",
      "已到司": "到司时间",
      "已成交": "签约时间",
      "已流失": "提交时间",
      "今日预约到店客户": "预约时间",
      "明日预约到店客户": "预约时间"
    },
    currentType: '已提交',
    currentState:0,
    page: 1,
    params:{},
  };

  async componentWillMount() {
    const { type, status } = this.$router.params;
    const { types, ctime } = this.state;
    let currentType = ""
    if (parseInt(status) === 1) {
      types.map((item, index) => {
        if (item.state == type) {
          item.active = true;
          currentType = item.title
        }
      });
      let queryParams = {}
      if (parseInt(type) === 5) {
        queryParams['state0'] = 1;
      } else {
        queryParams['state'] = type
      }
      this.setState({
        types,
        params: { ...queryParams },
        currentType,
        currentState:type
      },() => {
        this.props.getCustomerList({...this.state.params,page:1});
      });


    } else {
      ctime.map(item => {
        if (type === item.key) {
          item.active = true;
          currentType = item.title;
        }
      });
      this.setState({
        ctime,
        params:{
          ctime:type
        },
        currentType
      }, async () => {
        await this.props.getCustomerList({...this.state.params,page:1});
      });
    }


  }

  changeMode(index) {
    const { status } = this.$router.params;
    const { types, ctime } = this.state;

    let params = { page: 1 };
    this.setState({
      page:1
    })
    if (parseInt(status) === 0) {
      ctime.forEach(item => {
        if (item.key === ctime[index].key) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
      this.setState({
        ctime,
        currentType:ctime[index].title,
        params: { ctime: ctime[index].key },

      }, async () => {
        params = { ...params, ctime: ctime[index].key }
        await this.props.getCustomerList(params);
      })
    } else {
      types.forEach((item, i) => {
        if (i === index) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
      this.setState(
        {
          types,
          currentType: types[index].title,
          currentState:types[index].state
        },
        async () => {
          if (index === 4) {
            params = { ...params, state0: 1 };
            this.setState({
              params:{state0:1}
            })
          } else {
            this.setState({
              params:{state:types[index].state}
            })
            params = { ...params, state: types[index].state };
          }
          await this.props.getCustomerList(params);
        }
      );
    }
  }

  async loadMoreCustomer(params) {
    await this.props.getCustomerList(params);
  }

  render() {
    const { status } = this.$router.params;
    const { types, ctime } = this.state;
    const { list } = this.props;
    let arr = parseInt(status) === 0 ? ctime:types
    return (
      <View className="customer-list-index">
        <View className="customer-list-head">
          <Image
            className="back-page"
            onClick={() => {
              Taro.redirectTo({
                url:'/pages/customer/index'
              })
            }}
            src={require("../../assets/img/back.png")}
          />
          <Text className="customer-list-title">
            {parseInt(status) === 0 ? "预约到店客户" : "客户列表"}
          </Text>
          <Image
            className="contact-service"
            onClick={() => {
              window.location.href = "tel:10086";
            }}
            src={require("../../assets/img/service.png")}
          />
        </View>
        <View className="customer-list-type">
          {arr.map((item, index) => (
            <View
              className={{ "type-title": true, "type-active": item.active }}
              key={index}
              onClick={this.changeMode.bind(this, index)}
            >
              {item.title}
            </View>
          ))}
        </View>
        {
          list && (
              <Item parent={this} list={list} />
          )
        }
      </View>
    );
  }
}
export default CustomerList;
